<template>
    <div class="Table">
      <table class="courseTable">
        <thead>
          <tr>
            <th></th>
            <th v-for="(day, index) in daysOfWeek" :key="index">{{ day }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(timeSlot, timeIndex) in timeSlots" :key="timeIndex">
            <td>{{ timeSlot }}</td>
            <td v-for="(day, dayIndex) in daysOfWeek" :key="dayIndex">
                <el-popover
              :ref="`popover-${timeIndex}-${dayIndex}`" 
              placement="top-start"
              title="课程信息"
              width="200"
              trigger="hover"
              :content="getCourseInfo(day, timeSlot)"
              style="white-space: pre-line;"
              v-if="getCourseFromTable(day, timeSlot)"
            ></el-popover>
              <el-button v-popover="`popover-${timeIndex}-${dayIndex}`" v-if="getCourseFromTable(day, timeSlot)">
                {{ getCourseFromTable(day, timeSlot).name }}
              </el-button>
            
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>


  

  
  <script>
  export default {
    data() {
      return {
    firstFrom:{
        total:0,
      },
      pageFrom:{
        page: 1,
        pageSize: 10,
        id:'',
      // 要传给后端的数据
      },
      name:'',
      total: 0,
      studentId:'',
      tableData: [
    ],
        daysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        timeSlots: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10','11']
      };
    },
    methods: {
    parseTime(timeString) {
      const [day, timeRange] = timeString.split(',');
      const [start, end] = timeRange.split('-').map(Number);
      return { day, start, end };
    },
    getCourseFromTable(day, timeSlot) {
      const matchingCourse = this.tableData.find(course => {
        const { day: courseDay, start, end } = this.parseTime(course.timeSchedule);
        return day.toLowerCase() === courseDay.toLowerCase() && parseInt(timeSlot, 10) >= start && parseInt(timeSlot, 10) <= end;
      });
      return matchingCourse;
    },
    getCourseInfo(day, timeSlot) {
      const course = this.getCourseFromTable(day, timeSlot);
      if (course) {
        return `课程名称: ${course.name}\n 
        学院号: ${course.collegeId}\n 
        课程号: ${course.courseId}\n 
        学分: ${course.credit}\n 
        学时: ${course.period}\n 
        上课地点: ${course.location}\n `; // 替换为实际的课程信息
      }
      return '';
    },
      // 获取所有数据并保存,重要
        async getOwnFirstCourse() {
        // JSON化
         const config = {
         headers: {
        'Content-Type': 'application/json', 
        'token':`${localStorage.getItem("token")}`
      }
    };
    try {
      const { data: res } = await this.$http.post(`api/student/course/page`,JSON.stringify(this.pageFrom),config);
      if (res.status !== 500) {
        this.$message.success(`成功获取${this.name}的课程表`);
        this.tableData=res.data.records;
        this.firstFrom.total = res.data.total; // 保存总条数

      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
},
    },
    created() {
    // 初始化操作
    if(localStorage.getItem("type") !== 'student'){this.$router.push(`/login`);this.$message.error('你不是个学生');}
    this.name = localStorage.getItem('name');
    this.pageFrom.id=localStorage.getItem('studentId');
    this.getOwnFirstCourse();
  },

  };
  </script>
  
  <style>
.Table {
  width: 80%; /* 设置宽度占比 */
  margin: 30px auto; /* 居中显示 */
}

.courseTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px; /* 调整字体大小 */
  background-color: rgb(55, 133, 222); /* 设置背景颜色为淡蓝色 */
}

.courseTable th,
.courseTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
  </style>